<template>
  <div id="similarPage" @click="bodyClick">
    <HeadNav
      type="industry"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="industry" sort="similar"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">同类检索</div>
                <div class="search-container">
                  <div class="search-filter">
                    <div class="search-left-tag">且</div>
                    <!-- 年份 -->
                    <div class="search-item">
                      <span class="search-item-tag">年份</span>
                      <a-select
                        v-model="chooseYear"
                        style="width: 140px"
                        @change="yearChange"
                      >
                        <a-select-option
                          :value="item"
                          v-for="(item, index) in yearList"
                          :key="index"
                          >{{ item }}年</a-select-option
                        >
                      </a-select>
                    </div>
                    <!-- 类目 -->
                    <div class="search-item">
                      <span class="search-item-tag">类目</span>
                      <a-cascader
                        :field-names="{
                          label: 'name',
                          value: 'category_id',
                          children: 'child_list',
                        }"
                        :options="categoryList"
                        placeholder="所有类目"
                        change-on-select
                        :allowClear="false"
                        expand-trigger="hover"
                        v-model="chooseCategory"
                        style="width: 280px"
                        @change="selectCategory"
                      />
                    </div>
                    <!-- 作者 -->
                    <div class="search-item">
                      <span class="search-item-tag">作者</span>
                      <a-auto-complete
                        option-label-prop="value"
                        style="width: 280px"
                        placeholder="搜索作者"
                        @search="onSearchAuthor"
                        :defaultActiveFirstOption="false"
                        v-model="authorInput"
                        @blur="authorBlur"
                        @select="selectedAuthor"
                      >
                        <template slot="dataSource">
                          <a-select-option
                            v-for="(opt, index) in dataSourceAuthor"
                            :key="index"
                            :value="opt.name"
                          >
                            <div class="result">
                              <span>{{ opt.name }}</span>
                            </div>
                          </a-select-option>
                        </template>
                      </a-auto-complete>
                    </div>
                    <!-- 标签 -->
                    <div
                      class="search-item"
                      v-for="(item, index) in selectTagList"
                      :key="index"
                    >
                      <span class="search-item-tag">标签</span>
                      <a-select
                        mode="multiple"
                        v-model="item.chooseTag"
                        style="width: 280px"
                        :filter-option="false"
                        placeholder="选择标签"
                        class="dropdown-or"
                        @search="value => fetchTag(value,index)"
                        @change="(value,option) => handleChange(value,option,index)"
                      >
                        <a-spin
                          v-if="fetching"
                          slot="notFoundContent"
                          size="small"
                        />
                        <a-select-option
                          v-for="kitem in item.tagList"
                          :key="kitem.tag_id"
                          >{{ kitem.tag_name }}</a-select-option
                        >
                      </a-select>
                      <template>
                        <span
                          v-if="index == selectTagList.length - 1"
                          class="search-item-plus"
                          @click="changeTag('add',index)"
                          ><a-icon type="plus"
                        /></span>
                        <span class="search-item-minus" v-if="index > 0"
                          @click="changeTag('del',index)"
                          ><a-icon type="minus"
                        /></span>
                      </template>
                    </div>
                  </div>
                  <div style="text-align: center; margin-top: 20px">
                    <a-button
                      type="primary"
                      style="width: 120px"
                      @click="onSearch"
                      >检索</a-button
                    >
                    <a-button style="margin-left: 5px" @click="onReset"
                      >重置条件</a-button
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="model-container" v-if="showResult">
              <div class="model-bg">
                <div class="section-title">
                  <div class="desc" style="line-height: 1.5; padding: 17px 0">
                    在
                    <span class="main-font">“{{ cateText }}”</span>中检索到<span
                      v-if="tagText.length > 0"
                      >关联标签<span
                        class="main-font"
                        v-for="(item, index) in tagText"
                        :key="index"
                        >“{{ item }}”</span
                      ></span
                    >的品种共
                    <span class="main-font">{{
                      trueTotal > 1000 ? "1000+" : total
                    }}</span
                    >个
                  </div>
                </div>
              </div>
            </div>
            <!-- 检索结果 -->
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 400px;
                  position: relative;
                  padding-bottom: 75px;
                "
              >
                <div class="section-title">检索结果</div>
                <div class="table">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="60" />
                      <col width="220" />
                      <col width="90" />
                      <col width="120" />
                      <col width="160" />
                      <col width="160" />
                      <col width="230" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>序号</td>
                        <td>品种信息</td>
                        <td>类型</td>
                        <td>ISBN</td>
                        <td>作者</td>
                        <td>类目</td>
                        <td>标签</td>
                      </tr>
                    </thead>
                    <tbody v-if="goodsList.length > 0">
                      <tr v-for="(item, index) in goodsList" :key="index">
                        <td>{{ index + 1 + (pageSize * page - pageSize) }}</td>
                        <td>
                          <div class="goods-desc">
                            <span class="goods-image" v-if="item.cover_pic">
                              <img
                                :src="item.cover_pic"
                                alt
                                style="width: 40px; height: 40px"
                              />
                              <div
                                class="goods-logo prev"
                                v-if="item.is_presale == 1"
                              >
                                预
                              </div>
                              <div
                                class="goods-logo group"
                                v-else-if="item.have_presale == 1"
                              >
                                组
                              </div>
                            </span>
                            <span
                              v-else
                              class="no-pic"
                              style="min-width: 40px; min-height: 40px"
                            ></span>
                            <span
                              class="click-font goods-name"
                              :title="item.title"
                              @click.stop="$toDetail(item.goods_id)"
                              >{{ item.title }}</span
                            >
                          </div>
                        </td>
                        <td>
                          <span
                            class="data-tab data-tab-eleven"
                            v-if="
                              item.sale_type == '滞销品种' ||
                              item.sale_type == '停售品种'
                            "
                            >{{ item.sale_type }}</span
                          >
                          <span
                            class="data-tab data-tab-eight"
                            v-else-if="item.sale_type == '畅销品种'"
                            >{{ item.sale_type }}</span
                          >
                          <span
                            class="data-tab data-tab-ten"
                            v-else-if="item.sale_type"
                            >{{ item.sale_type }}</span
                          >
                        </td>
                        <td>
                          <span class="data-tab data-tab-eleven">{{
                            item.isbn
                          }}</span>
                        </td>
                        <td>
                          <div class="author">
                            <div
                              class="author-name"
                              v-if="item.authors.length == 0"
                            >
                              {{ item.author }}
                            </div>
                            <div
                              class="author-name click-font"
                              @click.stop="$toAuthor(item.authors[0].author_id)"
                              v-if="item.authors.length == 1"
                            >
                              {{ item.author }}
                            </div>
                            <div
                              v-if="item.authors.length > 1"
                              class="author-name click-font"
                              @click.stop="openAuthor(item, index)"
                            >
                              {{ item.author }}
                            </div>
                            <div class="author-list" v-if="item.active">
                              <div v-if="item.authors.length > 0">
                                <div
                                  class="author-item click"
                                  v-for="(aitem, aindex) in item.authors"
                                  :key="aindex"
                                  @click.stop="$toAuthor(aitem.author_id)"
                                >
                                  {{ aitem.name }}
                                </div>
                              </div>
                              <div v-else>
                                <div class="author-item">
                                  未查询到对应作者信息
                                </div>
                              </div>
                            </div>
                          </div>
                        </td>
                        <td>
                          <span>{{ item.cate_node_2 }}</span
                          ><span v-if="item.cate_node_3"
                            >>{{ item.cate_node_3 }}</span
                          ><span v-if="item.cate_node_4"
                            >>{{ item.cate_node_4 }}</span
                          >
                        </td>
                        <td>
                          <div v-if="item.tag_list.length > 0">
                            <span
                              v-for="(litem, lindex) in item.tag_list"
                              :key="lindex"
                              >{{ litem
                              }}<template
                                v-if="lindex !== item.tag_list.length - 1"
                                >；</template
                              ></span
                            >
                          </div>
                          <div v-else>--</div>
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="7">
                          <div style="padding: 40px 0"><a-empty /></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 分页 -->
                <div
                  style="position: absolute; right: 15px; bottom: 15px"
                  v-if="goodsList.length > 0"
                >
                  <a-pagination
                    :show-total="
                      (total) =>
                        `共 ${trueTotal > 1000 ? '1000+' : total}条数据`
                    "
                    :default-current="1"
                    v-model="page"
                    :total="total"
                    :defaultPageSize="pageSize"
                    @change="onShowSizeChange"
                  />
                </div>
              </div>
            </div>
            <div v-if="showResult">
              <!-- 属性分布 -->
              <div class="model-container">
                <div class="model-bg">
                  <div class="section-title">属性分布</div>
                  <div style="padding: 15px">
                    <a-row>
                      <a-col :span="12">
                        <div class="title">关联标签分布</div>
                        <div v-if="tagChartData.length > 0">
                          <div
                            id="tage"
                            style="width: 460px; margin-top: 20px"
                          ></div>
                        </div>
                        <div class="no-data" v-else>暂无数据</div>
                      </a-col>
                      <a-col :span="12" v-if="cateText == '所有类目'">
                        <div class="title">同类品类目分布</div>
                        <div
                          class="cate-content"
                          v-if="cateChartData.length > 0"
                          style="margin-top: 20px"
                        >
                          <div id="categroy" style="width: 175px"></div>
                          <div style="min-width: 180px">
                            <a-row
                              v-for="(item, index) in cateChartData"
                              :key="index"
                            >
                              <a-col :span="18">
                                <span
                                  :class="'point point' + (index + 1)"
                                ></span>
                                <span class="cate-name main-font">{{
                                  item.name
                                }}</span></a-col
                              >
                              <a-col :span="6"
                                ><span class="cate-count main-font"
                                  >{{ item.count }}%</span
                                ></a-col
                              >
                            </a-row>
                          </div>
                        </div>
                        <div class="no-data" v-else>暂无数据</div>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
              <!-- 按销售层级分析 -->
              <div class="model-container">
                <div class="model-bg">
                  <div class="section-title">按销售层级分析</div>
                  <div style="padding: 10px 15px">
                    <a-row>
                      <a-col :span="12">
                        <div class="title">码洋结构</div>
                        <div class="clearfix" v-if="ringData1.length > 0">
                          <div class="float-left">
                            <div id="ring1" class="chart"></div>
                          </div>
                          <div class="float-left chart-data">
                            <div class="chart-title">
                              <a-row type="flex" justify="start">
                                <a-col :span="8">
                                  <div class="text-right">同类平均</div>
                                </a-col>
                                <a-col :span="8"></a-col>
                                <a-col :span="8">
                                  <div class="text-right">行业平均</div>
                                </a-col>
                              </a-row>
                            </div>
                            <div
                              class="chart-list"
                              v-for="(item, index) in ringData1"
                              :key="index"
                            >
                              <a-row type="flex" justify="start">
                                <a-col :span="8">
                                  <div class="text-right chart-num">
                                    {{ item.value }}%
                                  </div>
                                </a-col>
                                <a-col :span="8">
                                  <div style="text-align: center">
                                    <span
                                      v-if="
                                        item.value >
                                        industryRingData1[index].value
                                      "
                                      class="red"
                                      ><a-icon type="caret-up"
                                    /></span>
                                    <span
                                      v-else-if="
                                        item.value <
                                        industryRingData1[index].value
                                      "
                                      class="green"
                                      ><a-icon type="caret-down"
                                    /></span>
                                    <span v-else>-</span>
                                  </div>
                                </a-col>
                                <a-col :span="8">
                                  <div class="text-right chart-num">
                                    {{ industryRingData1[index].value }}%
                                  </div>
                                </a-col>
                              </a-row>
                            </div>
                          </div>
                        </div>
                        <div class="no-data" v-else>暂无数据</div>
                      </a-col>
                      <a-col :span="12">
                        <div class="title">近12个月码洋结构波动</div>
                        <div v-if="areaData1.length > 0">
                          <div id="area1" class="areachart"></div>
                        </div>
                        <div class="no-data" v-else>暂无数据</div>
                      </a-col>
                    </a-row>
                    <a-row style="margin-top: 15px">
                      <a-col :span="12">
                        <div class="title">品种数结构</div>
                        <div class="clearfix" v-if="ringData2.length > 0">
                          <div class="float-left">
                            <div id="ring2" class="chart"></div>
                          </div>
                          <div class="float-left chart-data">
                            <div class="chart-title">
                              <a-row type="flex" justify="start">
                                <a-col :span="8">
                                  <div class="text-right">同类平均</div>
                                </a-col>
                                <a-col :span="8"></a-col>
                                <a-col :span="8">
                                  <div class="text-right">行业平均</div>
                                </a-col>
                              </a-row>
                            </div>
                            <div
                              class="chart-list"
                              v-for="(item, index) in ringData2"
                              :key="index"
                            >
                              <a-row type="flex" justify="start">
                                <a-col :span="8">
                                  <div class="text-right chart-num">
                                    {{ item.value }}%
                                  </div>
                                </a-col>
                                <a-col :span="8">
                                  <div style="text-align: center">
                                    <span
                                      v-if="
                                        item.value >
                                        industryRingData2[index].value
                                      "
                                      class="red"
                                      ><a-icon type="caret-up"
                                    /></span>
                                    <span
                                      v-else-if="
                                        item.value <
                                        industryRingData2[index].value
                                      "
                                      class="green"
                                      ><a-icon type="caret-down"
                                    /></span>
                                    <span v-else>-</span>
                                  </div>
                                </a-col>
                                <a-col :span="8">
                                  <div class="text-right chart-num">
                                    {{ industryRingData2[index].value }}%
                                  </div>
                                </a-col>
                              </a-row>
                            </div>
                          </div>
                        </div>
                        <div class="no-data" v-else>暂无数据</div>
                      </a-col>
                      <a-col :span="12">
                        <div class="title">近12个月品种数结构波动</div>
                        <div v-if="areaData2.length > 0">
                          <div id="area2" class="areachart"></div>
                        </div>
                        <div class="no-data" v-else>暂无数据</div>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
              <!-- 按书龄分析 -->
              <div class="model-container">
                <div class="model-bg">
                  <div class="section-title">按书龄分析</div>
                  <div style="padding: 10px 15px">
                    <a-row>
                      <a-col :span="12">
                        <div class="title">码洋结构</div>
                        <div class="clearfix" v-if="ringData3.length > 0">
                          <div class="float-left">
                            <div id="ring3" class="chart"></div>
                          </div>
                          <div class="float-left chart-data">
                            <div class="chart-title">
                              <a-row type="flex" justify="start">
                                <a-col :span="8">
                                  <div class="text-right">同类平均</div>
                                </a-col>
                                <a-col :span="8"></a-col>
                                <a-col :span="8">
                                  <div class="text-right">行业平均</div>
                                </a-col>
                              </a-row>
                            </div>
                            <div
                              class="chart-list"
                              v-for="(item, index) in ringData3"
                              :key="index"
                            >
                              <a-row type="flex" justify="start">
                                <a-col :span="8">
                                  <div class="text-right chart-num">
                                    {{ item.value }}%
                                  </div>
                                </a-col>
                                <a-col :span="8">
                                  <div style="text-align: center">
                                    <span
                                      v-if="
                                        item.value >
                                        industryRingData3[index].value
                                      "
                                      class="red"
                                      ><a-icon type="caret-up"
                                    /></span>
                                    <span
                                      v-else-if="
                                        item.value <
                                        industryRingData3[index].value
                                      "
                                      class="green"
                                      ><a-icon type="caret-down"
                                    /></span>
                                    <span v-else>-</span>
                                  </div>
                                </a-col>
                                <a-col :span="8">
                                  <div class="text-right chart-num">
                                    {{ industryRingData3[index].value }}%
                                  </div>
                                </a-col>
                              </a-row>
                            </div>
                          </div>
                        </div>
                        <div class="no-data" v-else>暂无数据</div>
                      </a-col>
                      <a-col :span="12">
                        <div class="title">近12个月码洋结构波动</div>
                        <div v-if="areaData3.length > 0">
                          <div id="area3" class="areachart"></div>
                        </div>
                        <div class="no-data" v-else>暂无数据</div>
                      </a-col>
                    </a-row>
                    <a-row style="margin-top: 15px">
                      <a-col :span="12">
                        <div class="title">品种数结构</div>
                        <div class="clearfix" v-if="ringData4.length > 0">
                          <div class="float-left">
                            <div id="ring4" class="chart"></div>
                          </div>
                          <div class="float-left chart-data">
                            <div class="chart-title">
                              <a-row type="flex" justify="start">
                                <a-col :span="8">
                                  <div class="text-right">同类平均</div>
                                </a-col>
                                <a-col :span="8"></a-col>
                                <a-col :span="8">
                                  <div class="text-right">行业平均</div>
                                </a-col>
                              </a-row>
                            </div>
                            <div
                              class="chart-list"
                              v-for="(item, index) in ringData4"
                              :key="index"
                            >
                              <a-row type="flex" justify="start">
                                <a-col :span="8">
                                  <div class="text-right chart-num">
                                    {{ item.value }}%
                                  </div>
                                </a-col>
                                <a-col :span="8">
                                  <div style="text-align: center">
                                    <span
                                      v-if="
                                        item.value >
                                        industryRingData4[index].value
                                      "
                                      class="red"
                                      ><a-icon type="caret-up"
                                    /></span>
                                    <span
                                      v-else-if="
                                        item.value <
                                        industryRingData4[index].value
                                      "
                                      class="green"
                                      ><a-icon type="caret-down"
                                    /></span>
                                    <span v-else>-</span>
                                  </div>
                                </a-col>
                                <a-col :span="8">
                                  <div class="text-right chart-num">
                                    {{ industryRingData4[index].value }}%
                                  </div>
                                </a-col>
                              </a-row>
                            </div>
                          </div>
                        </div>
                        <div class="no-data" v-else>暂无数据</div>
                      </a-col>
                      <a-col :span="12">
                        <div class="title">近12个月品种数结构波动</div>
                        <div v-if="areaData4.length > 0">
                          <div id="area4" class="areachart"></div>
                        </div>
                        <div class="no-data" v-else>暂无数据</div>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
              <!-- 按定价区间分析 -->
              <div class="model-container">
                <div class="model-bg">
                  <div class="section-title">按定价区间分析</div>
                  <div style="padding: 10px 15px">
                    <div class="clearfix">
                      <div
                        class="float-left"
                        style="width: 130px; text-align: center"
                      >
                        <span style="font-size: 12px">同类平均定价</span>
                      </div>
                      <div
                        class="float-left"
                        style="width: 30px; height: 1px; text-align: center"
                      ></div>
                      <div
                        class="float-left"
                        style="width: 130px; text-align: center"
                      >
                        <span style="font-size: 12px">行业平均定价</span>
                      </div>
                    </div>
                    <div class="clearfix" style="margin-bottom: 30px">
                      <div
                        class="float-left"
                        style="width: 130px; text-align: center"
                      >
                        <span class="main-font price">￥{{ publishAvg }}</span>
                      </div>
                      <div
                        class="float-left"
                        style="
                          width: 30px;
                          text-align: center;
                          line-height: 36px;
                        "
                      >
                        <span class="green" v-if="publishAvg < industryAvg"
                          ><a-icon type="caret-down"
                        /></span>
                        <span class="red" v-else-if="publishAvg > industryAvg"
                          ><a-icon type="caret-up"
                        /></span>
                        <span v-else>-</span>
                      </div>
                      <div
                        class="float-left"
                        style="width: 130px; text-align: center"
                      >
                        <span class="price">￥{{ industryAvg }}</span>
                      </div>
                    </div>
                    <a-row>
                      <a-col :span="12">
                        <div class="title">码洋结构</div>
                        <div class="clearfix" v-if="ringData5.length > 0">
                          <div class="float-left">
                            <div id="ring5" class="chart"></div>
                          </div>
                          <div class="float-left chart-data">
                            <div class="chart-title">
                              <a-row type="flex" justify="start">
                                <a-col :span="8">
                                  <div class="text-right">同类平均</div>
                                </a-col>
                                <a-col :span="8"></a-col>
                                <a-col :span="8">
                                  <div class="text-right">行业平均</div>
                                </a-col>
                              </a-row>
                            </div>
                            <div
                              class="chart-list"
                              v-for="(item, index) in ringData5"
                              :key="index"
                            >
                              <a-row type="flex" justify="start">
                                <a-col :span="8">
                                  <div class="text-right chart-num">
                                    {{ item.value }}%
                                  </div>
                                </a-col>
                                <a-col :span="8">
                                  <div style="text-align: center">
                                    <span
                                      v-if="
                                        item.value >
                                        industryRingData5[index].value
                                      "
                                      class="red"
                                      ><a-icon type="caret-up"
                                    /></span>
                                    <span
                                      v-else-if="
                                        item.value <
                                        industryRingData5[index].value
                                      "
                                      class="green"
                                      ><a-icon type="caret-down"
                                    /></span>
                                    <span v-else>-</span>
                                  </div>
                                </a-col>
                                <a-col :span="8">
                                  <div class="text-right chart-num">
                                    {{ industryRingData5[index].value }}%
                                  </div>
                                </a-col>
                              </a-row>
                            </div>
                          </div>
                        </div>
                        <div class="no-data" v-else>暂无数据</div>
                      </a-col>
                      <a-col :span="12">
                        <div class="title">近12个月码洋结构波动</div>
                        <div v-if="areaData5.length > 0">
                          <div id="area5" class="areachart"></div>
                        </div>
                        <div class="no-data" v-else>暂无数据</div>
                      </a-col>
                    </a-row>
                    <a-row style="margin-top: 15px">
                      <a-col :span="12">
                        <div class="title">品种数结构</div>
                        <div class="clearfix" v-if="ringData6.length > 0">
                          <div class="float-left">
                            <div id="ring6" class="chart"></div>
                          </div>
                          <div class="float-left chart-data">
                            <div class="chart-title">
                              <a-row type="flex" justify="start">
                                <a-col :span="8">
                                  <div class="text-right">同类平均</div>
                                </a-col>
                                <a-col :span="8"></a-col>
                                <a-col :span="8">
                                  <div class="text-right">行业平均</div>
                                </a-col>
                              </a-row>
                            </div>
                            <div
                              class="chart-list"
                              v-for="(item, index) in ringData6"
                              :key="index"
                            >
                              <a-row type="flex" justify="start">
                                <a-col :span="8">
                                  <div class="text-right chart-num">
                                    {{ item.value }}%
                                  </div>
                                </a-col>
                                <a-col :span="8">
                                  <div style="text-align: center">
                                    <span
                                      v-if="
                                        item.value >
                                        industryRingData6[index].value
                                      "
                                      class="red"
                                      ><a-icon type="caret-up"
                                    /></span>
                                    <span
                                      v-else-if="
                                        item.value <
                                        industryRingData6[index].value
                                      "
                                      class="green"
                                      ><a-icon type="caret-down"
                                    /></span>
                                    <span v-else>-</span>
                                  </div>
                                </a-col>
                                <a-col :span="8">
                                  <div class="text-right chart-num">
                                    {{ industryRingData6[index].value }}%
                                  </div>
                                </a-col>
                              </a-row>
                            </div>
                          </div>
                        </div>
                        <div class="no-data" v-else>暂无数据</div>
                      </a-col>
                      <a-col :span="12">
                        <div class="title">近12个月品种数结构波动</div>
                        <div v-if="areaData6.length > 0">
                          <div id="area6" class="areachart"></div>
                        </div>
                        <div class="no-data" v-else>暂无数据</div>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
              <!-- 读者基础特征 -->
              <div class="model-container basic">
                <div class="model-bg">
                  <div class="section-title">读者基本特征</div>
                  <div style="padding: 15px">
                    <a-row>
                      <a-col :span="12">
                        <div class="title">性别分布</div>
                        <div v-if="readRingData1.length > 0">
                          <div
                            id="readring1"
                            style="
                              width: 400px;
                              margin-top: 20px;
                              margin-left: 30px;
                            "
                          ></div>
                        </div>
                        <div class="no-data" v-else>
                          数据量较小，暂不支持分析
                        </div>
                      </a-col>
                      <a-col :span="12">
                        <div class="title">年龄分布</div>
                        <div
                          v-if="columnData1.length > 0"
                          style="margin-left: 50px"
                        >
                          <div
                            id="column1"
                            style="width: 400px; margin-top: 20px"
                          ></div>
                          <div class="column">
                            <a-row>
                              <a-col
                                :span="4"
                                v-for="(item, index) in columnData1"
                                :key="index"
                              >
                                <div class="column-num">{{ item.value }}%</div>
                                <div class="column-name">{{ item.name }}</div>
                              </a-col>
                            </a-row>
                          </div>
                        </div>
                        <div class="no-data" v-else>
                          数据量较小，暂不支持分析
                        </div>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-col :span="12">
                        <div class="title">近一年消费</div>
                        <div
                          v-if="readRingData2.length > 0"
                          style="margin-left: 90px"
                        >
                          <div
                            id="readring2"
                            style="width: 266px; margin-top: 20px"
                          ></div>
                          <div class="column">
                            <a-row>
                              <a-col
                                :span="4"
                                v-for="(item, index) in readRingData2"
                                :key="index"
                              >
                                <div class="column-num">{{ item.value }}%</div>
                                <div class="column-name">{{ item.name }}</div>
                              </a-col>
                            </a-row>
                          </div>
                        </div>
                        <div class="no-data" v-else>
                          数据量较小，暂不支持分析
                        </div>
                      </a-col>
                      <a-col :span="12">
                        <div class="title">
                          城市层级<span
                            style="
                              cursor: pointer;
                              font-size: 14px;
                              display: inline-block;
                              vertical-align: top;
                            "
                            @click="openModal"
                          >
                            <svg class="icon" aria-hidden="true">
                              <use xlink:href="#icon-tips" />
                            </svg>
                          </span>
                        </div>
                        <div v-if="columnData2.length > 0">
                          <div
                            id="column2"
                            style="
                              width: 400px;
                              margin-top: 20px;
                              margin-left: 46px;
                            "
                          ></div>
                        </div>
                        <div class="no-data" v-else>
                          数据量较小，暂不支持分析
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading
      ref="load"
      :show="1"
      :isLoading="
        goodsLoading ||
        tagLoading ||
        cateLoading ||
        levelLoading ||
        ageLoading ||
        priceLoading ||
        readerLoading
      "
    ></Loading>
    <!-- 展示城市层级弹层 -->
    <a-modal
      v-model="cityModal"
      width="1000px"
      :footer="null"
      :title="null"
      destroyOnClose
      on-ok="readhandleOk"
    >
      <div class="popup">
        <div class="city">
          <div class="city-title">一线城(4个)</div>
          <div class="city-content">北京、上海、广州、深圳</div>
        </div>
        <div class="city">
          <div class="city-title">新一线城(15个)</div>
          <div class="city-content">
            成都、重庆、杭州、武汉、西安、郑州、青岛、长沙、天津、苏州、南京、东莞、沈阳、合肥、佛山
          </div>
        </div>
        <div class="city">
          <div class="city-title">二线城(30个)</div>
          <div class="city-content">
            昆明、福州、无锡、厦门、哈尔滨、长春、南昌、济南、宁波、大连、贵阳、温州、石家庄、泉州、南宁、金华、常州、珠海、惠州、嘉兴、南通、中山、保定、兰州、台州、徐州、太原、绍兴、烟台、廊坊
          </div>
        </div>
        <div class="city">
          <div class="city-title">三线城(70个)</div>
          <div class="city-content">
            海口、汕头、潍坊、扬州、洛阳、乌鲁木齐、临沂、唐山、镇江、盐城、湖州、赣州、漳州、揭阳、江门、桂林、邯郸、泰州、济宁、呼和浩特、咸阳、芜湖、三亚、阜阳、淮安、遵义、银川、衡阳、上饶、柳州、淄博、莆田、绵阳、湛江、商丘、宜昌、沧州、连云港、南阳、蚌埠、驻马店、滁州、邢台、潮州、秦皇岛、肇庆、荆州、周口、马鞍山、清远、宿州、威海、九江、新乡、信阳、襄阳、岳阳、安庆、菏泽、宜春、黄冈、泰安、宿迁、株洲、宁德、鞍山、南充、六安、大庆、舟山
          </div>
        </div>
        <div class="city">
          <div class="city-title">四线城(90个)</div>
          <div class="city-content">
            常德、渭南湖、孝感、丽水、运城、德州、张家口、鄂尔多斯、阳江、泸州、丹东、曲靖、乐山、许昌、湘潭、晋中、安阳、齐齐哈尔、北海、宝鸡、抚州、景德镇、延安、三明、抚顺、亳州、日照、西宁、衢州、拉萨、淮北、焦作、平顶山、滨州、吉安、濮阳、眉山、池州、荆门、铜仁、长治、衡水、铜陵、承德、达州、邵阳、德阳、龙岩、南平、淮南、黄石、营口、东营、吉林、韶关、枣庄、包头、怀化、宣城、临汾、聊城、梅州、盘锦、锦州、榆林、玉林、十堰、汕尾、咸宁、宜宾、永州、益阳、黔南州、黔东南、恩施、红河、大理、大同、鄂州、忻州、吕梁、黄山、开封、郴州、茂名、漯河、葫芦岛、河源、娄底、延边
          </div>
        </div>
        <div class="city">
          <div class="city-title">五线城(128个)</div>
          <div class="city-content">
            汉中、辽阳、四平、内江、六盘水、安顺、新余、牡丹江、晋城、自贡、三门峡、赤峰、本溪、防城港、铁岭、随州、广安、广元、天水、遂宁、萍乡、西双版纳、绥化、鹤壁、湘西、松原、阜新、酒泉、张家界、黔西南、保山、昭通、河池、来宾、玉溪、梧州、鹰潭、钦州、云浮、佳木斯、克拉玛依、呼伦贝尔、贺州、通化、阳泉、朝阳、百色、毕节、贵港、丽江、安康、通辽、德宏、朔州、伊犁、文山、楚雄、嘉峪关、凉山、资阳、锡林郭勒盟、雅安、普洱、崇左、庆阳、巴音郭楞（巴州）、乌兰察布、白山、昌吉、白城、兴安盟、定西、喀什、白银、陇南、巴彦淖尔、巴中、鸡西、乌海、临沧、海东、张掖、商洛、黑河、哈密、吴忠、攀枝花、双鸭山、阿克苏、石嘴山、阿拉善盟、海西、平凉、林芝、固原、武威、儋州、吐鲁番、甘孜、辽源、临夏、铜川、金昌、鹤岗、伊春、中卫、怒江、和田、迪庆、甘南、阿坝、大兴安岭、七台河、山南、日喀则、塔城、博尔塔拉、昌都、阿勒泰、玉树、海南、黄南、果洛、克孜勒苏、阿里、海北、那曲、三沙
          </div>
        </div>
        <div style="padding: 0 280px; margin-top: 20px">
          <div id="cityChart" style="width: 400px"></div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<style lang="scss" scoped src="@/style/scss/pages/industry/similar.scss"></style>
<script>
import {
  INDUSTRY_SIMILAR_GOODS,
  INDUSTRY_SIMILAR_TAG,
  INDUSTRY_SIMILAR_CATE,
  INDUSTRY_SIMILAR_SALELEVELCHART,
  INDUSTRY_SIMILAR_SALEAGECHART,
  INDUSTRY_SIMILAR_SALEPRICECHART,
  INDUSTRY_SIMILAR_READER_BASE,
  INDUSTRY_AUTHOR_LISTS
} from "../../apis/industry.js";
import { COMMON_CATEGORY } from "../../apis/common.js";
import { QUERY_GOODS_SEARCH_TAG } from "../../apis/inquire.js";
import { Chart, registerShape } from "@antv/g2";
export default {
  data() {
    return {
      pagePower: true,
      goodsLoading: false,
      tagLoading: false,
      cateLoading: false,
      levelLoading: false,
      ageLoading: false,
      priceLoading: false,
      readerLoading: false,
      yearList: [],
      chooseYear: "",
      categoryList: [],
      chooseCategory: [0],
      keyWords: [],
      selectTagList: [
        {
          tagList: [],
          chooseTag: [],
          chooseTagText: [],
        },
      ],
      fetching: false,
      tagText: [],
      saveTagText: [],
      showResult: false,
      page: 1,
      pageSize: 5,
      total: 0,
      trueTotal: 0,
      goodsList: [],
      cateText: "所有类目",
      saveCateText: "所有类目",
      tagChartData: [],
      tagChange: null,
      cateChartData: [],
      cateChange: null,
      // 作者
      authorInput:"",
      lastAuthor:"",
      dataSourceAuthor: [],
      authorID: 0,
      // 销售结构
      ringData1: [],
      ringChange1: null,
      industryRingData1: [],
      areaData1: [],
      areaChange1: null,
      ringData2: [],
      ringChange2: null,
      industryRingData2: [],
      areaData2: [],
      areaChange2: null,
      levelFirst: true,
      // 年龄
      ringData3: [],
      ringChange3: null,
      industryRingData3: [],
      areaData3: [],
      areaChange3: null,
      ringData4: [],
      ringChange4: null,
      industryRingData4: [],
      areaData4: [],
      areaChange4: null,
      ageFirst: true,
      // 定价
      ringData5: [],
      ringChange5: null,
      industryRingData5: [],
      areaData5: [],
      areaChange5: null,
      ringData6: [],
      ringChange6: null,
      industryRingData6: [],
      areaData6: [],
      areaChange6: null,
      priceFirst: true,
      publishAvg: 0,
      industryAvg: 0,
      // 读者画像
      readRingData1: [],
      readRingChange1: null,
      readRingData2: [],
      readRingChange2: null,
      columnData1: [],
      columnChange1: null,
      columnData2: [],
      columnChange2: null,
      cityModal: false,
      popupCityChart: null,
    };
  },
  mounted() {
    let _year = Number(this.$moment().format("YYYY"));
    let _length = _year - 2020 + 1;
    this.yearList = [];
    for (let i = 0; i < _length; i++) {
      this.yearList.push(_year - i);
    }
    this.chooseYear = this.yearList[0];
    this.getFirstCategory();
    this.checkPower();
  },
  methods: {
    // 检测权限
    async checkPower() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        // tags: this.keyWords.join(","),
        cate_id: this.chooseCategory[this.chooseCategory.length - 1],
        period: this.chooseYear,
        page: 1,
        page_size: 1,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_SIMILAR_GOODS(data);
      if (res.code == 0) {
        this.pagePower = true;
      } else {
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 商品列表
    async getGoodsData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        tags: this.keyWords.join(","),
        cate_id: this.chooseCategory[this.chooseCategory.length - 1],
        author_id: this.authorID,
        period: this.chooseYear,
        page: this.page,
        page_size: this.pageSize,
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_SIMILAR_GOODS(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.goodsList = [];
        this.trueTotal = res.data.total_count;
        if (res.data.total_count / this.pageSize > 200) {
          this.total = 1000;
        } else {
          this.total = res.data.total_count;
        }
        res.data.result.map((value, key) => {
          value.active = false;
          this.goodsList.push(value);
        });
        this.$nextTick(() => {
          this.goodsLoading = false;
        });
      } else {
        this.goodsLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 关联标签分布
    async getTagChart() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        tags: this.keyWords.join(","),
        cate_id: this.chooseCategory[this.chooseCategory.length - 1],
        author_id: this.authorID,
        period: this.chooseYear,
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_SIMILAR_TAG(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.tagChartData = [];
        this.tagChartData = res.data;
        if (this.tagChartData.length > 0) {
          this.$nextTick(() => {
            if (this.tagChange) {
              this.tagChange.destroy();
              this.initTag();
            } else {
              this.initTag();
            }
            this.tagLoading = false;
          });
        } else {
          this.tagLoading = false;
        }
      } else {
        this.tagLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 类目
    async getCateChart() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        tags: this.keyWords.join(","),
        cate_id: this.chooseCategory[this.chooseCategory.length - 1],
        author_id: this.authorID,
        period: this.chooseYear,
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_SIMILAR_CATE(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.cateChartData = [];
        let _total = 0;
        res.data.map((value, key) => {
          _total += value.count;
        });
        res.data.map((value, key) => {
          let _num = Number(value.count / _total) * 100;
          let _obj = {
            name: value.name,
            count: _num ? Number(_num.toFixed(2)) : 0,
          };
          this.cateChartData.push(_obj);
        });
        if (this.cateChartData.length > 0) {
          this.$nextTick(() => {
            if (this.cateChange) {
              this.cateChange.destroy();
              this.initCate();
            } else {
              this.initCate();
            }
            this.cateLoading = false;
          });
        } else {
          this.cateLoading = false;
        }
      } else {
        this.cateLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 销售层级
    async getSalelevelData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        tags: this.keyWords.join(","),
        cate_id: this.chooseCategory[this.chooseCategory.length - 1],
        author_id: this.authorID,
        period: this.chooseYear,
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_SIMILAR_SALELEVELCHART(data);
      if (res.code == 0) {
        this.pagePower = true;
        // 平均月销码洋
        this.ringData1 = [];
        for (let i in res.data.sale_level_ma) {
          let _obj = {
            value: res.data.sale_level_ma[i],
          };
          if (i == "level_1") {
            _obj.name = "1000册以上";
          } else if (i == "level_2") {
            _obj.name = "500~1000册";
          } else if (i == "level_3") {
            _obj.name = "100~500册";
          } else if (i == "level_4") {
            _obj.name = "10~100册";
          } else if (i == "level_5") {
            _obj.name = "10册以下";
          }
          this.ringData1.push(_obj);
        }
        this.industryRingData1 = [];
        // 行业码洋
        for (let i in res.data.sale_level_industry_ma) {
          let _obj = {
            value: res.data.sale_level_industry_ma[i],
          };
          if (i == "level_1") {
            _obj.name = "1000册以上";
          } else if (i == "level_2") {
            _obj.name = "500~1000册";
          } else if (i == "level_3") {
            _obj.name = "100~500册";
          } else if (i == "level_4") {
            _obj.name = "10~100册";
          } else if (i == "level_5") {
            _obj.name = "10册以下";
          }
          this.industryRingData1.push(_obj);
        }
        // 码洋结构波动
        this.areaData1 = [];
        let _arr1 = [],
          _arr2 = [],
          _arr3 = [],
          _arr4 = [],
          _arr5 = [];
        res.data.sale_level_ma_chart.map((value, key) => {
          for (let i in value.data) {
            let _obj = {
              value: value.data[i],
              year: value.date.toString() + "月",
            };
            if (i == "level_1") {
              _obj.name = "1000册以上";
              _arr1.push(_obj);
            } else if (i == "level_2") {
              _obj.name = "500~1000册";
              _arr2.push(_obj);
            } else if (i == "level_3") {
              _obj.name = "100~500册";
              _arr3.push(_obj);
            } else if (i == "level_4") {
              _obj.name = "10~100册";
              _arr4.push(_obj);
            } else if (i == "level_5") {
              _obj.name = "10册以下";
              _arr5.push(_obj);
            }
          }
        });
        this.areaData1 = [..._arr1, ..._arr2, ..._arr3, ..._arr4, ..._arr5];
        // 平均月销品种数
        this.ringData2 = [];
        for (let i in res.data.sale_level_count) {
          let _obj = {
            value: res.data.sale_level_count[i],
          };
          if (i == "level_1") {
            _obj.name = "1000册以上";
          } else if (i == "level_2") {
            _obj.name = "500~1000册";
          } else if (i == "level_3") {
            _obj.name = "100~500册";
          } else if (i == "level_4") {
            _obj.name = "10~100册";
          } else if (i == "level_5") {
            _obj.name = "10册以下";
          }
          this.ringData2.push(_obj);
        }
        this.industryRingData2 = [];
        // 行业品种数
        for (let i in res.data.sale_level_industry_count) {
          let _obj = {
            value: res.data.sale_level_industry_count[i],
          };
          if (i == "level_1") {
            _obj.name = "1000册以上";
          } else if (i == "level_2") {
            _obj.name = "500~1000册";
          } else if (i == "level_3") {
            _obj.name = "100~500册";
          } else if (i == "level_4") {
            _obj.name = "10~100册";
          } else if (i == "level_5") {
            _obj.name = "10册以下";
          }
          this.industryRingData2.push(_obj);
        }
        // 品种数结构波动
        this.areaData2 = [];
        let _garr1 = [],
          _garr2 = [],
          _garr3 = [],
          _garr4 = [],
          _garr5 = [];
        res.data.sale_level_count_chart.map((value, key) => {
          for (let i in value.data) {
            let _obj = {
              value: value.data[i],
              year: value.date.toString() + "月",
            };
            if (i == "level_1") {
              _obj.name = "1000册以上";
              _garr1.push(_obj);
            } else if (i == "level_2") {
              _obj.name = "500~1000册";
              _garr2.push(_obj);
            } else if (i == "level_3") {
              _obj.name = "100~500册";
              _garr3.push(_obj);
            } else if (i == "level_4") {
              _obj.name = "10~100册";
              _garr4.push(_obj);
            } else if (i == "level_5") {
              _obj.name = "10册以下";
              _garr5.push(_obj);
            }
          }
        });
        this.areaData2 = [
          ..._garr1,
          ..._garr2,
          ..._garr3,
          ..._garr4,
          ..._garr5,
        ];
        // console.log(this.areaData2);
        this.$nextTick(() => {
          if (this.levelFirst) {
            this.initRing(1);
            this.initArea(1);
            this.initRing(2);
            this.initArea(2);
          } else {
            this.ringChange1.destroy();
            this.initRing(1);
            this.areaChange1.destroy();
            this.initArea(1);
            this.ringChange2.destroy();
            this.initRing(2);
            this.areaChange2.destroy();
            this.initArea(2);
          }
          this.levelFirst = false;
          this.levelLoading = false;
        });
      } else {
        this.levelLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 年龄
    async getSaleageData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        tags: this.keyWords.join(","),
        cate_id: this.chooseCategory[this.chooseCategory.length - 1],
        author_id: this.authorID,
        period: this.chooseYear,
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_SIMILAR_SALEAGECHART(data);
      if (res.code == 0) {
        this.pagePower = true;
        // 平均月销码洋
        this.ringData3 = [];
        for (let i in res.data.sale_age_ma) {
          let _obj = {
            value: res.data.sale_age_ma[i],
          };
          if (i == "sale_age_1") {
            _obj.name = "1年以内";
          } else if (i == "sale_age_2") {
            _obj.name = "1~2年";
          } else if (i == "sale_age_3") {
            _obj.name = "2~3年";
          } else if (i == "sale_age_4") {
            _obj.name = "3~5年";
          } else if (i == "sale_age_5") {
            _obj.name = "5年以上";
          }
          this.ringData3.push(_obj);
        }
        this.industryRingData3 = [];
        // 行业码洋
        for (let i in res.data.sale_age_industry_ma) {
          let _obj = {
            value: res.data.sale_age_industry_ma[i],
          };
          if (i == "sale_age_1") {
            _obj.name = "1年以内";
          } else if (i == "sale_age_2") {
            _obj.name = "1~2年";
          } else if (i == "sale_age_3") {
            _obj.name = "2~3年";
          } else if (i == "sale_age_4") {
            _obj.name = "3~5年";
          } else if (i == "sale_age_5") {
            _obj.name = "5年以上";
          }
          this.industryRingData3.push(_obj);
        }
        // 码洋结构波动
        this.areaData3 = [];
        let _arr1 = [],
          _arr2 = [],
          _arr3 = [],
          _arr4 = [],
          _arr5 = [];
        res.data.sale_age_ma_chart.map((value, key) => {
          for (let i in value.data) {
            let _obj = {
              value: value.data[i],
              year: value.date.toString() + "月",
            };
            if (i == "sale_age_1") {
              _obj.name = "1年以内";
              _arr1.push(_obj);
            } else if (i == "sale_age_2") {
              _obj.name = "1~2年";
              _arr2.push(_obj);
            } else if (i == "sale_age_3") {
              _obj.name = "2~3年";
              _arr3.push(_obj);
            } else if (i == "sale_age_4") {
              _obj.name = "3~5年";
              _arr4.push(_obj);
            } else if (i == "sale_age_5") {
              _obj.name = "5年以上";
              _arr5.push(_obj);
            }
          }
        });
        this.areaData3 = [..._arr1, ..._arr2, ..._arr3, ..._arr4, ..._arr5];
        // 平均月销品种数
        this.ringData4 = [];
        for (let i in res.data.sale_age_count) {
          let _obj = {
            value: res.data.sale_age_count[i],
          };
          if (i == "sale_age_1") {
            _obj.name = "1年以内";
          } else if (i == "sale_age_2") {
            _obj.name = "1~2年";
          } else if (i == "sale_age_3") {
            _obj.name = "2~3年";
          } else if (i == "sale_age_4") {
            _obj.name = "3~5年";
          } else if (i == "sale_age_5") {
            _obj.name = "5年以上";
          }
          this.ringData4.push(_obj);
        }
        this.industryRingData4 = [];
        // 行业品种数
        for (let i in res.data.sale_age_industry_count) {
          let _obj = {
            value: res.data.sale_age_industry_count[i],
          };
          if (i == "sale_age_1") {
            _obj.name = "1年以内";
          } else if (i == "sale_age_2") {
            _obj.name = "1~2年";
          } else if (i == "sale_age_3") {
            _obj.name = "2~3年";
          } else if (i == "sale_age_4") {
            _obj.name = "3~5年";
          } else if (i == "sale_age_5") {
            _obj.name = "5年以上";
          }
          this.industryRingData4.push(_obj);
        }
        // 品种数结构波动
        this.areaData4 = [];
        let _garr1 = [],
          _garr2 = [],
          _garr3 = [],
          _garr4 = [],
          _garr5 = [];
        res.data.sale_age_count_chart.map((value, key) => {
          for (let i in value.data) {
            let _obj = {
              value: value.data[i],
              year: value.date.toString() + "月",
            };
            if (i == "sale_age_1") {
              _obj.name = "1年以内";
              _garr1.push(_obj);
            } else if (i == "sale_age_2") {
              _obj.name = "1~2年";
              _garr2.push(_obj);
            } else if (i == "sale_age_3") {
              _obj.name = "2~3年";
              _garr3.push(_obj);
            } else if (i == "sale_age_4") {
              _obj.name = "3~5年";
              _garr4.push(_obj);
            } else if (i == "sale_age_5") {
              _obj.name = "5年以上";
              _garr5.push(_obj);
            }
          }
        });
        this.areaData4 = [
          ..._garr1,
          ..._garr2,
          ..._garr3,
          ..._garr4,
          ..._garr5,
        ];
        this.$nextTick(() => {
          if (this.ageFirst) {
            this.initRing(3);
            this.initArea(3);
            this.initRing(4);
            this.initArea(4);
          } else {
            this.ringChange3.destroy();
            this.initRing(3);
            this.areaChange3.destroy();
            this.initArea(3);
            this.ringChange4.destroy();
            this.initRing(4);
            this.areaChange4.destroy();
            this.initArea(4);
          }
          this.ageFirst = false;
          this.ageLoading = false;
        });
      } else {
        this.ageLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 定价
    async getSalepriceData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        tags: this.keyWords.join(","),
        cate_id: this.chooseCategory[this.chooseCategory.length - 1],
        author_id: this.authorID,
        period: this.chooseYear,
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_SIMILAR_SALEPRICECHART(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.publishAvg = res.data.supplier_avg_price;
        this.industryAvg = res.data.industry_avg_price;
        // 平均月销码洋
        this.ringData5 = [];
        for (let i in res.data.sale_price_ma) {
          let _obj = {
            value: res.data.sale_price_ma[i],
          };
          if (i == "sale_price_1") {
            _obj.name = "20元以下";
          } else if (i == "sale_price_2") {
            _obj.name = "20~50元";
          } else if (i == "sale_price_3") {
            _obj.name = "50~100元";
          } else if (i == "sale_price_4") {
            _obj.name = "100~200元";
          } else if (i == "sale_price_5") {
            _obj.name = "200元以上";
          }
          this.ringData5.push(_obj);
        }
        this.industryRingData5 = [];
        // 行业码洋
        for (let i in res.data.sale_price_industry_ma) {
          let _obj = {
            value: res.data.sale_price_industry_ma[i],
          };
          if (i == "sale_price_1") {
            _obj.name = "20元以下";
          } else if (i == "sale_price_2") {
            _obj.name = "20~50元";
          } else if (i == "sale_price_3") {
            _obj.name = "50~100元";
          } else if (i == "sale_price_4") {
            _obj.name = "100~200元";
          } else if (i == "sale_price_5") {
            _obj.name = "200元以上";
          }
          this.industryRingData5.push(_obj);
        }
        // 码洋结构波动
        this.areaData5 = [];
        let _arr1 = [],
          _arr2 = [],
          _arr3 = [],
          _arr4 = [],
          _arr5 = [];
        res.data.sale_price_ma_chart.map((value, key) => {
          for (let i in value.data) {
            let _obj = {
              value: value.data[i],
              year: value.date.toString() + "月",
            };
            if (i == "sale_price_1") {
              _obj.name = "20元以下";
              _arr1.push(_obj);
            } else if (i == "sale_price_2") {
              _obj.name = "20~50元";
              _arr2.push(_obj);
            } else if (i == "sale_price_3") {
              _obj.name = "50~100元";
              _arr3.push(_obj);
            } else if (i == "sale_price_4") {
              _obj.name = "100~200元";
              _arr4.push(_obj);
            } else if (i == "sale_price_5") {
              _obj.name = "200元以上";
              _arr5.push(_obj);
            }
          }
        });
        this.areaData5 = [..._arr1, ..._arr2, ..._arr3, ..._arr4, ..._arr5];
        // 平均月销品种数
        this.ringData6 = [];
        for (let i in res.data.sale_price_count) {
          let _obj = {
            value: res.data.sale_price_count[i],
          };
          if (i == "sale_price_1") {
            _obj.name = "20元以下";
          } else if (i == "sale_price_2") {
            _obj.name = "20~50元";
          } else if (i == "sale_price_3") {
            _obj.name = "50~100元";
          } else if (i == "sale_price_4") {
            _obj.name = "100~200元";
          } else if (i == "sale_price_5") {
            _obj.name = "200元以上";
          }
          this.ringData6.push(_obj);
        }
        this.industryRingData6 = [];
        // 行业品种数
        for (let i in res.data.sale_price_industry_count) {
          let _obj = {
            value: res.data.sale_price_industry_count[i],
          };
          if (i == "sale_price_1") {
            _obj.name = "20元以下";
          } else if (i == "sale_price_2") {
            _obj.name = "20~50元";
          } else if (i == "sale_price_3") {
            _obj.name = "50~100元";
          } else if (i == "sale_price_4") {
            _obj.name = "100~200元";
          } else if (i == "sale_price_5") {
            _obj.name = "200元以上";
          }
          this.industryRingData6.push(_obj);
        }
        // 品种数结构波动
        this.areaData6 = [];
        let _garr1 = [],
          _garr2 = [],
          _garr3 = [],
          _garr4 = [],
          _garr5 = [];
        res.data.sale_price_count_chart.map((value, key) => {
          for (let i in value.data) {
            let _obj = {
              value: value.data[i],
              year: value.date.toString() + "月",
            };
            if (i == "sale_price_1") {
              _obj.name = "20元以下";
              _garr1.push(_obj);
            } else if (i == "sale_price_2") {
              _obj.name = "20~50元";
              _garr2.push(_obj);
            } else if (i == "sale_price_3") {
              _obj.name = "50~100元";
              _garr3.push(_obj);
            } else if (i == "sale_price_4") {
              _obj.name = "100~200元";
              _garr4.push(_obj);
            } else if (i == "sale_price_5") {
              _obj.name = "200元以上";
              _garr5.push(_obj);
            }
          }
        });
        this.areaData6 = [
          ..._garr1,
          ..._garr2,
          ..._garr3,
          ..._garr4,
          ..._garr5,
        ];
        this.$nextTick(() => {
          if (this.priceFirst) {
            this.initRing(5);
            this.initArea(5);
            this.initRing(6);
            this.initArea(6);
          } else {
            this.ringChange5.destroy();
            this.initRing(5);
            this.areaChange5.destroy();
            this.initArea(5);
            this.ringChange6.destroy();
            this.initRing(6);
            this.areaChange6.destroy();
            this.initArea(6);
          }
          this.priceFirst = false;
          this.priceLoading = false;
        });
      } else {
        this.priceLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 读者画像
    async getReaderData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        tags: this.keyWords.join(","),
        cate_id: this.chooseCategory[this.chooseCategory.length - 1],
        author_id: this.authorID,
        period: this.chooseYear,
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_SIMILAR_READER_BASE(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.readRingData1 = [];
        this.readRingData2 = [];
        this.columnData1 = [];
        this.columnData2 = [];
        if (Object.keys(res.data).length > 0) {
          let _total1 = 0,
            _total2 = 0,
            _total3 = 0,
            _total4 = 0;
          // 性别分布
          res.data.persona_sex.map((value, key) => {
            _total1 += Number(value.value);
          });
          if (_total1 > 0) {
            for (let i = 0; i < 3; i++) {
              let _obj = {
                value: 0,
              };
              if (i == 0) {
                _obj.name = "男性";
              } else if (i == 1) {
                _obj.name = "女性";
              } else if (i == 2) {
                _obj.name = "未知";
              }
              this.readRingData1.push(_obj);
            }
            res.data.persona_sex.map((value, key) => {
              let _num = (Number(value.value) / _total1) * 100;
              _num = _num ? Number(_num.toFixed(2)) : 0;
              if (value.name == "男") {
                this.readRingData1[0].value = _num;
              } else if (value.name == "女") {
                this.readRingData1[1].value = _num;
              } else if (value.name == "未知") {
                this.readRingData1[2].value = _num;
              }
            });
          }
          // 消费能力
          res.data.persona_money.map((value, key) => {
            _total2 += Number(value.value);
          });
          if (_total2 > 0) {
            for (let i = 0; i < 4; i++) {
              let _obj = {
                value: 0,
                type: "this",
              };
              if (i == 0) {
                _obj.name = "30元以下";
              } else if (i == 1) {
                _obj.name = "30-60元";
              } else if (i == 2) {
                _obj.name = "60-100元";
              } else if (i == 3) {
                _obj.name = "100元以上";
              }
              this.readRingData2.push(_obj);
            }
            res.data.persona_money.map((value, key) => {
              let _num = (Number(value.value) / _total2) * 100;
              _num = _num ? Number(_num.toFixed(2)) : 0;
              if (value.name == "低消费") {
                this.readRingData2[0].value = _num;
              } else if (value.name == "中低消费") {
                this.readRingData2[1].value = _num;
              } else if (value.name == "中高消费") {
                this.readRingData2[2].value = _num;
              } else if (value.name == "高消费") {
                this.readRingData2[3].value = _num;
              }
            });
          }
          // 年龄分布
          res.data.persona_age.map((value, key) => {
            _total3 += Number(value.value);
          });
          if (_total3 > 0) {
            for (let i = 0; i < 6; i++) {
              let _obj = {
                value: 0,
                type: "this",
              };
              if (i == 0) {
                _obj.name = "18-25岁";
              } else if (i == 1) {
                _obj.name = "26-30岁";
              } else if (i == 2) {
                _obj.name = "31-35岁";
              } else if (i == 3) {
                _obj.name = "36-40岁";
              } else if (i == 4) {
                _obj.name = "41-50岁";
              } else if (i == 5) {
                _obj.name = "51岁以上";
              }
              this.columnData1.push(_obj);
            }
            res.data.persona_age.map((value, key) => {
              let _num = (Number(value.value) / _total3) * 100;
              _num = _num ? Number(_num.toFixed(2)) : 0;
              if (value.name == "小年轻") {
                this.columnData1[0].value = _num;
              } else if (value.name == "青年") {
                this.columnData1[1].value = _num;
              } else if (value.name == "青壮年") {
                this.columnData1[2].value = _num;
              } else if (value.name == "中青年") {
                this.columnData1[3].value = _num;
              } else if (value.name == "中年") {
                this.columnData1[4].value = _num;
              } else if (value.name == "中老年") {
                this.columnData1[5].value = _num;
              }
            });
          }
          // 城市层级
          if (res.data.persona_city) {
            res.data.persona_city.map((value, key) => {
              _total4 += Number(value.value);
            });
            if (_total4 > 0) {
              for (let i = 0; i < 6; i++) {
                let _obj = {
                  value: 0,
                };
                if (i == 0) {
                  _obj.name = "一线城市";
                } else if (i == 1) {
                  _obj.name = "二线城市";
                } else if (i == 2) {
                  _obj.name = "三线城市";
                } else if (i == 3) {
                  _obj.name = "四线城市";
                } else if (i == 4) {
                  _obj.name = "五线城市";
                } else if (i == 5) {
                  _obj.name = "新一线城市";
                }
                this.columnData2.push(_obj);
              }
              res.data.persona_city.map((value, key) => {
                let _num = (Number(value.value) / _total4) * 100;
                _num = _num ? Number(_num.toFixed(2)) : 0.0;
                if (value.name == "一线城市") {
                  this.columnData2[0].value = _num;
                } else if (value.name == "二线城市") {
                  this.columnData2[1].value = _num;
                } else if (value.name == "三线城市") {
                  this.columnData2[2].value = _num;
                } else if (value.name == "四线城市") {
                  this.columnData2[3].value = _num;
                } else if (value.name == "五线城市") {
                  this.columnData2[4].value = _num;
                } else if (value.name == "新一线城市") {
                  this.columnData2[5].value = _num;
                }
              });
            }
          }
          let _this = this;
          this.$nextTick(() => {
            if (_this.readRingData1.length > 0) {
              if (_this.readRingChange1) {
                _this.readRingChange1.destroy();
                _this.initRing1();
              } else {
                _this.initRing1();
              }
            }
            if (_this.columnData1.length > 0) {
              if (_this.columnChange1) {
                _this.columnChange1.destroy();
                _this.initColumn1();
              } else {
                _this.initColumn1();
              }
            }
            if (_this.readRingData2.length > 0) {
              if (_this.readRingChange2) {
                _this.readRingChange2.destroy();
                _this.initRing2();
              } else {
                _this.initRing2();
              }
            }
            if (_this.columnData2.length > 0) {
              if (_this.columnChange2) {
                _this.columnChange2.destroy();
                _this.initColumn2();
              } else {
                _this.initColumn2();
              }
            }
            _this.readerLoading = false;
          });
        } else {
          this.readerLoading = false;
        }
      } else {
        this.readerLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取初级分类列表
    async getFirstCategory() {
      var tStamp = this.$getTimeStamp();
      let data = {
        // floor: 2,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await COMMON_CATEGORY(data);
      if (res.code == 0) {
        this.categoryList = [];
        let _data = {
          category_id: 0,
          name: "所有类目",
          pid: 0,
        };
        this.categoryList.push(_data);
        res.data.map((value, key) => {
          this.categoryList.push(value);
        });
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 标签列表获取
    async getTagList(val,index) {
      var tStamp = this.$getTimeStamp();
      let data = {
        timestamp: tStamp,
        search: val,
        state: 1,
      };
      data.sign = this.$getSign(data);
      let res = await QUERY_GOODS_SEARCH_TAG(data);
      if (res.code == 0) {
        this.selectTagList[index].tagList = [];
        this.selectTagList[index].tagList = res.data.result;
        this.fetching = false;
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 作者列表获取
    async getAuthorList(val) {
      var tStamp = this.$getTimeStamp();
      let data = {
        page: 1,
        page_size: 100,
        timestamp: tStamp,
        name: val,
      };
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_AUTHOR_LISTS(data);
      if (res.code == 0) {
        this.dataSourceAuthor = [];
        if(this.authorInput.length > 0){
          res.data.list.map((value) => {
            let _obj = value;
            _obj.name = value.name + "（" + value.author_id + "）";
            this.dataSourceAuthor.push(_obj);
          });
        }
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 添加/删除标签筛选项
    changeTag(type,index){
      if(type == 'add'){
        this.selectTagList.push({
          tagList: [],
          chooseTag: [],
          chooseTagText: [],
        })
      }else{
        this.selectTagList.splice(index,1);
      }
    },
    yearChange(value) {
      this.chooseYear = value;
    },
    selectCategory(value, selectedOptions) {
      let _text = [];
      selectedOptions.map((val, key) => {
        _text.push(val.name);
      });
      this.saveCateText = _text.join(">");
    },
    // 搜索作者
    onSearchAuthor(value) {
      let _value = value.toString();
      this.dataSourceAuthor = [];
      if(_value.length > 0){
        this.getAuthorList(_value);
      }
    },
    authorBlur(value){
      if(this.authorInput != this.lastAuthor){
        this.authorInput = "";
        this.authorID = 0;
        this.dataSourceAuthor = [];
      }
    },
    // 选中作者
    selectedAuthor(value) {
      this.dataSourceAuthor.map((val, key) => {
        if (val.name == value) {
          this.authorID = val.author_id;
          this.lastAuthor = value;
        }
      });
    },
    // 搜索标签
    fetchTag(value,index) {
      // console.log('fetchTag',value,index);
      if (value.length > 0) {
        this.fetching = true;
        this.selectTagList[index].tagList = [];
        this.getTagList(value,index);
      } else {
        this.selectTagList[index].tagList = [];
      }
    },
    // 搜索
    onSearch() {
      let _count = 0,_arr = [];
      this.selectTagList.map((val)=>{
        if(val.chooseTag.length == 0){
          _count ++;
        }else{
          _arr.push(val.chooseTag.join('|'));
        }
      })
      if (this.chooseCategory[0] == 0 && _count == this.selectTagList.length && this.authorID == 0) {
        this.$refs.head.globalTip(1, "请选择类目、作者或者标签进行检索！", 0);
        return;
      }
      this.keyWords = _arr;
      this.page = 1;
      this.goodsLoading = true;
      this.tagLoading = true;
      this.levelLoading = true;
      this.ageLoading = true;
      this.priceLoading = true;
      this.readerLoading = true;
      this.showResult = true;
      this.cateText = this.saveCateText;
      this.tagText = this.saveTagText;
      setTimeout(()=>{
        this.getGoodsData();
        this.getTagChart();
        if (this.chooseCategory[0] == 0) {
          this.cateLoading = true;
          this.getCateChart();
        }
        this.getSalelevelData();
        this.getSaleageData();
        this.getSalepriceData();
        this.getReaderData();
      },100);
    },
    // 重置
    onReset() {
      this.chooseYear = this.yearList[0];
      this.chooseCategory = [0];
      this.selectTagList = this.selectTagList.map((val)=>{
        val.tagList = [];
        val.chooseTag = [];
        val.chooseTagText = [];
        return val;
      })
      this.keyWords = [];
      this.saveTagText = [];
      this.authorInput = "";
      this.dataSourceAuthor = [];
      this.authorID = 0;
      this.lastAuthor = "";
      this.saveTagText = "所有类目";
    },
    // 选中标签
    handleChange(value,option,index) {
      // console.log('handleChange',value,option,index);
      this.selectTagList[index].chooseTag = value;
      this.selectTagList[index].chooseTagText = [];
      this.saveTagText = [];
      option.map((value) => {
        this.selectTagList[index].chooseTagText.push(value.componentOptions.children[0].text);
      });
      this.selectTagList.map((val)=>{
        val.chooseTagText.map((v,k)=>{
          if(!this.saveTagText.includes(v)){
            this.saveTagText.push(v);
          }
        })
      })
      // console.log(this.saveTagText);
    },
    // 分页
    onShowSizeChange(page, pageSize) {
      this.goodsLoading = true;
      this.page = page;
      this.getGoodsData();
    },
    // 多个作者
    openAuthor(item, index) {
      this.goodsList = this.goodsList.map((value, key) => {
        if (index == key) {
          value.active = true;
        } else {
          value.active = false;
        }
        return value;
      });
    },
    bodyClick() {
      this.goodsList = this.goodsList.map((value) => {
        value.active = false;
        return value;
      });
    },
    // 打开城市弹层
    openModal() {
      this.cityModal = true;
      this.$nextTick(() => {
        this.initPopupChart();
      });
    },
    // 关联标签图表
    initTag() {
      let _this = this;
      this.tagChange = new Chart({
        container: "tage",
        autoFit: true,
        autoHide: false,
        height: 220,
        // appendPadding: [0, 5, 0, 0],
      });
      this.tagChange.data(this.tagChartData);
      this.tagChange.scale("count", {
        alias: "品种数：",
        nice: true,
      });

      this.tagChange.axis("tag_name", {
        tickLine: null,
        label: {
          autoHide: false,
          //   autoRotate: false,
        },
      });
      this.tagChange.legend(false);
      this.tagChange.tooltip({
        showMarkers: false,
      });
      this.tagChange.interaction("active-region");
      this.tagChange
        .interval()
        .position("tag_name*count")
        .color("tag_name", [
          "#4A99E8",
          "#656BC6",
          "#803DA4",
          "#FF6700",
          "#C05252",
          "#7BE07C",
          "#9CD141",
          "#FFD147",
          "#FEA038",
          "#F8121D",
        ])
        .size(20);
      this.tagChange.render();
    },
    // 类目分布图表
    initCate() {
      let data = this.cateChartData,
        _this = this;
      // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
      const sliceNumber = 0.003;
      // 自定义 other 的图形，增加两条线
      registerShape("interval", "slice-shape", {
        draw(cfg, container) {
          const points = cfg.points;
          let path = [];
          path.push(["M", points[0].x, points[0].y]);
          path.push(["L", points[1].x, points[1].y - sliceNumber]);
          path.push(["L", points[2].x, points[2].y - sliceNumber]);
          path.push(["L", points[3].x, points[3].y]);
          path.push("Z");
          path = this.parsePath(path);
          return container.addShape("path", {
            attrs: {
              fill: cfg.color,
              path,
            },
          });
        },
      });

      this.cateChange = new Chart({
        container: "categroy", // 指定图表容器 ID
        autoFit: true,
        height: 160,
        // padding: [0, 0, 0, -180],
      });

      this.cateChange.data(data);
      this.cateChange.scale("count", {
        formatter: (val) => {
          // val = val * 100 + "%";
          return val;
        },
      });
      this.cateChange.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.7,
      });
      this.cateChange.legend(false);
      this.cateChange.tooltip({
        showMarkers: false,
        showTitle: false,
      });
      this.cateChange
        .interval()
        .adjust("stack")
        .position("count")
        .color("name", ["#4A99E8", "#656BC6", "#803DA4", "#FF6700", "#C05252"])
        .tooltip("name*count", function (name, count) {
          return {
            title: "",
            name: name,
            value: count + "%",
          };
        })
        .shape("slice-shape");
      this.cateChange.interaction("element-active");
      // this.cateChange.removeInteraction("legend-filter");
      // this.cateChange.removeInteraction('legend-active');
      this.cateChange.render();
    },
    // 饼图
    initRing(index) {
      let data, chart;
      // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
      const sliceNumber = 0.003;
      // 自定义 other 的图形，增加两条线
      registerShape("interval", "slice-shape", {
        draw(cfg, container) {
          const points = cfg.points;
          let path = [];
          path.push(["M", points[0].x, points[0].y]);
          path.push(["L", points[1].x, points[1].y - sliceNumber]);
          path.push(["L", points[2].x, points[2].y - sliceNumber]);
          path.push(["L", points[3].x, points[3].y]);
          path.push("Z");
          path = this.parsePath(path);
          return container.addShape("path", {
            attrs: {
              fill: cfg.color,
              path,
            },
          });
        },
      });
      if (index == 1) {
        data = this.ringData1;
        this.ringChange1 = new Chart({
          container: "ring1",
          autoFit: true,
          height: 160,
        });
        chart = this.ringChange1;
      } else if (index == 2) {
        data = this.ringData2;
        this.ringChange2 = new Chart({
          container: "ring2",
          autoFit: true,
          height: 160,
        });
        chart = this.ringChange2;
      } else if (index == 3) {
        data = this.ringData3;
        this.ringChange3 = new Chart({
          container: "ring3",
          autoFit: true,
          height: 160,
        });
        chart = this.ringChange3;
      } else if (index == 4) {
        data = this.ringData4;
        this.ringChange4 = new Chart({
          container: "ring4",
          autoFit: true,
          height: 160,
        });
        chart = this.ringChange4;
      } else if (index == 5) {
        data = this.ringData5;
        this.ringChange5 = new Chart({
          container: "ring5",
          autoFit: true,
          height: 160,
        });
        chart = this.ringChange5;
      } else if (index == 6) {
        data = this.ringData6;
        this.ringChange6 = new Chart({
          container: "ring6",
          autoFit: true,
          height: 160,
        });
        chart = this.ringChange6;
      }
      chart.data(data);
      chart.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.7,
      });
      chart.tooltip({
        showMarkers: false,
      });
      chart.legend({
        position: "right",
        offsetX: -20,
      });
      chart
        .interval()
        .adjust("stack")
        .position("value")
        .color("name", (name) => {
          if (name == data[0].name) {
            if (index == 1 || index == 2) {
              return "#F8121D";
            } else if (index == 3 || index == 4) {
              return "#7BE07C";
            } else if (index == 5 || index == 6) {
              return "#4A99E8";
            }
          } else if (name == data[1].name) {
            if (index == 1 || index == 2) {
              return "#FC6F28";
            } else if (index == 3 || index == 4) {
              return "#38AA20";
            } else if (index == 5 || index == 6) {
              return "#656BC6";
            }
          } else if (name == data[2].name) {
            if (index == 1 || index == 2) {
              return "#FFCC33";
            } else if (index == 3 || index == 4) {
              return "#FFD147";
            } else if (index == 5 || index == 6) {
              return "#803DA4";
            }
          } else if (name == data[3].name) {
            if (index == 1 || index == 2) {
              return "#EDD78D";
            } else if (index == 3 || index == 4) {
              return "#FEA038";
            } else if (index == 5 || index == 6) {
              return "#FF6700";
            }
          } else if (name == data[4].name) {
            if (index == 1 || index == 2) {
              return "#DAE2E7";
            } else if (index == 3 || index == 4) {
              return "#FC6F28";
            } else if (index == 5 || index == 6) {
              return "#C05253";
            }
          }
        })
        .shape("slice-shape")
        .tooltip("name*value", (name, value) => {
          return {
            title: "同类平均",
            name: name,
            value: value + "%",
          };
        });
      chart.interaction("element-active");
      chart.render();
    },
    // 面积图
    initArea(index) {
      let data, _dv, chart, _color;
      if (index == 1) {
        data = this.areaData1;
        this.areaChange1 = new Chart({
          container: "area1",
          autoFit: true,
          height: 160,
        });
        chart = this.areaChange1;
        _color = ["#F7676F", "#FC732F", "#FFCF43", "#F4E2A7", "#E2E7E9"];
      } else if (index == 2) {
        data = this.areaData2;
        this.areaChange2 = new Chart({
          container: "area2",
          autoFit: true,
          height: 160,
        });
        chart = this.areaChange2;
        _color = ["#F7676F", "#FC732F", "#FFCF43", "#F4E2A7", "#E2E7E9"];
      } else if (index == 3) {
        data = this.areaData3;
        this.areaChange3 = new Chart({
          container: "area3",
          autoFit: true,
          height: 160,
        });
        chart = this.areaChange3;
        _color = ["#7BE07C", "#38AA20", "#FFD147", "#FEA038", "#FC6F28"];
      } else if (index == 4) {
        data = this.areaData4;
        this.areaChange4 = new Chart({
          container: "area4",
          autoFit: true,
          height: 160,
        });
        chart = this.areaChange4;
        _color = ["#7BE07C", "#38AA20", "#FFD147", "#FEA038", "#FC6F28"];
      } else if (index == 5) {
        data = this.areaData5;
        this.areaChange5 = new Chart({
          container: "area5",
          autoFit: true,
          height: 160,
        });
        chart = this.areaChange5;
        _color = ["#A4CBF1", "#B2B5E1", "#BD9FCE", "#FDB380", "#E8C8C8"];
      } else if (index == 6) {
        data = this.areaData6;
        this.areaChange6 = new Chart({
          container: "area6",
          autoFit: true,
          height: 160,
        });
        chart = this.areaChange6;
        _color = ["#A4CBF1", "#B2B5E1", "#BD9FCE", "#FDB380", "#E8C8C8"];
      }
      // console.log(index,data)
      chart.data(data);
      chart.scale({
        value: {
          nice: true,
          max: 100,
        },
        year: {
          range: [0, 1],
        },
      });
      chart.axis("value", {
        label: {
          formatter: function (value) {
            return value + "%";
          },
        },
      });
      chart.legend(false);
      chart.tooltip({
        showCrosshairs: true, // 展示 Tooltip 辅助线
        shared: true,
        showMarkers: true,
        itemTpl: `<div style="margin-bottom: 10px;list-style:none;">
                    <span style="background-color:{color};" class="g2-tooltip-marker"></span>
                    {name}: {value}%
                    </div>`,
      });
      chart.area().adjust("stack").position("year*value").color("name", _color);
      chart.line().adjust("stack").position("year*value").color("name", _color);

      chart.interaction("element-highlight");
      chart.render();
    },
    // 性别分布饼图
    initRing1() {
      let data = this.readRingData1;
      this.readRingChange1 = new Chart({
        container: "readring1",
        autoFit: true,
        padding: [-80, 0, 0, 0],
        height: 234,
      });
      this.readRingChange1.data(data);
      this.readRingChange1.legend(false);
      this.readRingChange1.tooltip(false);
      this.readRingChange1.facet("rect", {
        fields: ["name"],
        // padding: 20,
        showTitle: false,
        eachView: (view, facet) => {
          const data = facet.data;
          let color;
          if (data[0].name === "男性") {
            color = "#2B6AE7";
          } else if (data[0].name === "女性") {
            color = "#EA5D73";
          } else if (data[0].name === "未知") {
            color = "#FF8C3F";
          }
          data.push({ name: "其他", value: 100 - data[0].value });
          view.data(data);
          view.coordinate("theta", {
            radius: 0.9,
            innerRadius: 0.75,
          });
          view
            .interval()
            .adjust("stack")
            .position("value")
            .color("name", [color, "#EDF6FC"])
            .style({
              opacity: 1,
            });
          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].name,
            style: {
              fontSize: 12,
              fill: "#7789AF",
              fontWeight: 300,
              textBaseline: "bottom",
              textAlign: "center",
            },
            offsetY: 23,
          });

          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].value + "%",
            style: {
              fontSize: 12,
              fill: "#07193F",
              fontWeight: 700,
              textAlign: "center",
            },
          });

          // view.interaction("element-active");
        },
      });
      this.readRingChange1.render();
    },
    // 消费柱状图
    initRing2() {
      let _this = this,
        data = [],
        _arr = [];
      this.readRingData2.map((value, key) => {
        let _obj = {
          value: 100 - value.value,
          name: value.name,
          type: "other",
        };
        _arr.push(_obj);
      });
      data = [..._arr, ...this.readRingData2];
      this.readRingChange2 = new Chart({
        container: "readring2",
        autoFit: true,
        autoHide: false,
        padding: [10, 0, 0, 0],
        height: 140,
      });
      this.readRingChange2.data(data);
      this.readRingChange2.scale("value", {
        nice: true,
      });
      this.readRingChange2.axis(false);
      this.readRingChange2.axis(false);
      this.readRingChange2.tooltip(false);
      this.readRingChange2.interaction("active-region");
      this.readRingChange2.legend(false);
      this.readRingChange2
        .interval()
        .position("name*value")
        .color("name*type", (val, type) => {
          if (val == "30元以下" && type == "this") {
            return "#26A4D0";
          } else if (val == "30-60元" && type == "this") {
            return "#4179EA";
          } else if (val == "60-100元" && type == "this") {
            return "#685FA7";
          } else if (val == "100元以上" && type == "this") {
            return "#F5A726";
          } else {
            return "#EDF6FC";
          }
        })
        .adjust("stack");
      this.readRingChange2.render();
    },
    // 年龄分布柱状图
    initColumn1() {
      let _this = this,
        data = [],
        _arr = [];
      this.columnData1.map((value, key) => {
        let _obj = {
          value: 100 - value.value,
          name: value.name,
          type: "other",
        };
        _arr.push(_obj);
      });
      data = [..._arr, ...this.columnData1];
      this.columnChange1 = new Chart({
        container: "column1",
        autoFit: true,
        autoHide: false,
        padding: [10, 0, 0, 0],
        height: 140,
      });
      this.columnChange1.data(data);
      this.columnChange1.scale("value", {
        nice: true,
      });
      this.columnChange1.axis(false);
      this.columnChange1.axis(false);
      this.columnChange1.tooltip(false);
      this.columnChange1.interaction("active-region");
      this.columnChange1.legend(false);
      this.columnChange1
        .interval()
        .position("name*value")
        .color("name*type", (val, type) => {
          if (val == this.columnData1[0].name && type == "this") {
            return "#7079E0";
          } else if (val == this.columnData1[1].name && type == "this") {
            return "#D15B7E";
          } else if (val == this.columnData1[2].name && type == "this") {
            return "#FC6E6C";
          } else if (val == this.columnData1[3].name && type == "this") {
            return "#FFA06B";
          } else if (val == this.columnData1[4].name && type == "this") {
            return "#FFB64D";
          } else if (val == this.columnData1[5].name && type == "this") {
            return "#FFDB3F";
          } else {
            return "#EDF6FC";
          }
        })
        .adjust("stack");
      this.columnChange1.render();
    },
    // 城市层级饼图
    initColumn2() {
      let _num = (
          this.columnData2[0].value +
          this.columnData2[1].value +
          this.columnData2[5].value
        ).toFixed(2),
        _num1 = (this.columnData2[2].value + this.columnData2[3].value).toFixed(
          2
        );
      let data = [
        {
          name: "一二线城市",
          value: Number(_num),
        },
        {
          name: "三四线城市",
          value: Number(_num1),
        },
        { name: "五线城市", value: this.columnData2[4].value },
      ];
      this.columnChange2 = new Chart({
        container: "column2",
        autoFit: true,
        padding: [-80, 0, 0, 0],
        height: 234,
      });
      this.columnChange2.data(data);
      this.columnChange2.legend(false);
      this.columnChange2.tooltip(false);
      this.columnChange2.facet("rect", {
        fields: ["name"],
        // padding: 20,
        showTitle: false,
        eachView: (view, facet) => {
          const data = facet.data;
          let color;
          if (data[0].name === "一二线城市") {
            color = "#EB5E13";
          } else if (data[0].name === "三四线城市") {
            color = "#FFDD58";
          } else if (data[0].name === "五线城市") {
            color = "#F8E692";
          }
          data.push({ name: "未知", value: 100 - data[0].value });
          view.data(data);
          view.coordinate("theta", {
            radius: 0.9,
            innerRadius: 0.75,
          });
          view
            .interval()
            .adjust("stack")
            .position("value")
            .color("name", [color, "#EDF6FC"])
            .style({
              opacity: 1,
            });
          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].name,
            style: {
              fontSize: 12,
              fill: "#7789AF",
              fontWeight: 300,
              textBaseline: "bottom",
              textAlign: "center",
            },
            offsetY: 25,
          });

          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].value + "%",
            style: {
              fontSize: 12,
              fill: "#07193F",
              fontWeight: 700,
              textAlign: "center",
            },
          });

          // view.interaction("element-active");
        },
      });
      this.columnChange2.render();
    },
    // 弹层城市层级饼图
    initPopupChart() {
      let data = [
        {
          name: "一二线城市人口",
          value: 31.0,
        },
        {
          name: "三四线城市人口",
          value: 51.0,
        },
        { name: "五线城市人口", value: 18.0 },
      ];
      this.popupCityChart = new Chart({
        container: "cityChart",
        autoFit: true,
        padding: [-80, 0, 0, 0],
        height: 200,
      });
      this.popupCityChart.data(data);
      this.popupCityChart.legend(false);
      this.popupCityChart.tooltip(false);
      this.popupCityChart.facet("rect", {
        fields: ["name"],
        // padding: 20,
        showTitle: false,
        eachView: (view, facet) => {
          const data = facet.data;
          let color;
          if (data[0].name === "一二线城市人口") {
            color = "#EB5E13";
          } else if (data[0].name === "三四线城市人口") {
            color = "#FFDD58";
          } else if (data[0].name === "五线城市人口") {
            color = "#F8E692";
          }
          data.push({ name: "未知", value: 100 - data[0].value });
          view.data(data);
          view.coordinate("theta", {
            radius: 0.9,
            innerRadius: 0.75,
          });
          view
            .interval()
            .adjust("stack")
            .position("value")
            .color("name", [color, "#EDF6FC"])
            .style({
              opacity: 1,
            });
          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].name,
            style: {
              fontSize: 12,
              fill: "#7789AF",
              fontWeight: 300,
              textBaseline: "bottom",
              textAlign: "center",
            },
            offsetY: 25,
          });

          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].value + "%",
            style: {
              fontSize: 12,
              fill: "#07193F",
              fontWeight: 700,
              textAlign: "center",
            },
          });

          // view.interaction("element-active");
        },
      });
      this.popupCityChart.render();
    },
    // 头部切换机构触发
    publisherChange() {
      this.showResult = false;
      this.onReset();
      this.cityModal = false;
      this.publishAvg = 0;
      this.industryAvg = 0;
      this.goodsList = [];
      this.tagChartData = [];
      this.cateChartData = [];
      this.ringData1 = [];
      this.areaData1 = [];
      this.industryRingData1 = [];
      this.ringData2 = [];
      this.areaData2 = [];
      this.industryRingData2 = [];
      this.ringData3 = [];
      this.areaData3 = [];
      this.industryRingData3 = [];
      this.ringData4 = [];
      this.areaData4 = [];
      this.industryRingData4 = [];
      this.ringData5 = [];
      this.areaData5 = [];
      this.industryRingData5 = [];
      this.ringData6 = [];
      this.areaData6 = [];
      this.industryRingData6 = [];
      this.readRingData1 = [];
      this.readRingData2 = [];
      this.columnData1 = [];
      this.columnData2 = [];
      this.checkPower();
    },
  },
};
</script>
